<template>

  <div>
    <el-divnicIder></el-divnicIder>
    <!--操作按钮-->
    <div>
      <div style="display: flex;justify-content: space-between">
        <div>
        </div>
        <div>
          <el-button  type="success" @click="thenAdd()" icon="el-icon-circle-plus"
                     size="small">发布通知
          </el-button>
        </div>
      </div>
    </div>
    <!--分页列表-->
    <div class="tableSet">
      <!--handleSelectionChange 复选框点击事件，就是每一条数据前面的勾选按钮-->
      <el-table
          border
          ref="multipleTable"
          :data="page.data"
          tooltip-effect="dark"
          style="width: 100%"
          size="small"
          v-loading="loading">
        <el-table-column
            prop="nicId"
            label="编号"
            width="50">
        </el-table-column>
        <el-table-column
            prop="nicTitle"
            label="通知内容"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="nicCreateTime"
            label="发布时间"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="nicUserName"
            label="发布人"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="nicStatus"
            label="发布状态"
            show-overflow-tooltip>
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.nicStatus"
                active-color="#13ce66"
                inactive-color="#ff4949" @change="updateStatus(scope.row)">
            </el-switch>
            {{ scope.row.nicStatus === true ? '发布' : '暂不发布' }}
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            show-overflow-tooltip>
          <template slot-scope="scope">
            <!--$index 下标，row 行数据-->
            <el-button
                size="mini"
                @click="thenUpdate(scope.$index, scope.row)">编辑
            </el-button>
            <!-- type="danger" 删除按钮红色-->
            <el-button
                size="mini"
                type="danger"
                @click="thenDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <!--分页控制组件-->
    <div class="block">
      <!--/**
      * 当前条数，@size-change 自动带过来的
      * @param val
      */-->
      <!-- /**
     * 当前页，@current-change 自动带过来的
     */-->
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="size"
          layout="total, prev, pager, next, sizes, jumper"
          :total="page.total">
      </el-pagination>

    </div>

    <!--弹窗，点了编辑会先给addData中的字段赋值，因为编写需要通过nicId去改该条数据-->
    <div>
      <el-dialog
          :title="addData.nicId === 0? '发布通知':'编辑'"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
          center>
        <el-form :label-position="textAlign"
                 :model="addData" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm"
                 :rules="fromRules">
          <el-form-item label="通知内容:" prop="nicTitle">
            <el-input type="textarea" v-model="addData.nicTitle"></el-input>
          </el-form-item>
          <!--<el-form-item label="通知内容:" prop="nicTitle">-->
          <!--  <el-input style="width: 92%" v-model="addData.nicTitle" clearable></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="状态:">
            <el-radio v-model="addData.nicStatus" :label="true" border>发布</el-radio>
            <el-radio v-model="addData.nicStatus" :label="false" border>暂不发布</el-radio>
          </el-form-item>
          <el-form-item>
            <!--@keydown.enter.native 键盘回车触发-->
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button @click="cancel()">取 消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>


  </div>
</template>

<script>

export default {
  name: "PerEmp",
  //导入组件
  data() {
    return {
      defaultTeacher: true,
      defaultStudent: false,
      // 表单文字对其方式
      textAlign: 'right',
      // 加载动画
      loading: false,
      // 弹窗控制，true打开弹窗，false关闭弹窗
      dialogVisible: false,
      // 增加修改对象
      addData: {
        nicId: 0,
        nicTitle: '',
        nicStatus: true
      },
      // 分页对象
      page: {
        total: 0,
        data: [{}]
      },
      // 第几页，默认第一页
      currentPage: 1,
      // 每页大小，默认10条数据一页
      size: 10,
      // 表单正则校验
      fromRules: {
        nicTitle: [
          {required: true, message: '请输入内容', trigger: 'blur'}
        ]
      }
    }
  },
  // 一进入页面就要调用的接口放到 mounted 里面，比如页面表格分页
  mounted() {
    this.initTable();
  },
  methods: {
    /**
     * 分页数据
     */
    initTable() {
      this.loading = true
      this.getRequestParams("/notice/page", {currentPage: this.currentPage, size: this.size}).then(data => {
        if (data) {
          this.page = data
          this.loading = false;
        }
      })
    },
    /**
     * 提交表单
     */
    submitForm() {
      // 正则校验表单数据
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {// 验证通过
          if (this.addData.nicId === 0) {
            // 调用添加接口
            this.postRequestData('/notice/addOrUpdate', this.addData).then(data => {
              // 添加成功
              if (data) {
                // 刷新表格数据
                this.initTable();
              }
            })
            // 关闭弹窗
            this.dialogVisible = false;
            this.addData = {nicStatus: true};
          } else {
            // 调用添加接口
            this.postRequestData('/notice/addOrUpdate', this.addData).then(data => {
              // 修改成功
              if (data) {
                // 刷新表格数据
                this.initTable();
              }
            })
            // 关闭弹窗
            this.dialogVisible = false;
            // 默认选择按钮
            this.addData = {nicStatus: true};
          }
        } else {
          this.$message.error('请输入必填项!');
          return false;
        }
      });
    },
    /**
     * 新增点击
     */
    thenAdd() {
      this.addData = {nicId: 0, nicStatus: true}
      this.dialogVisible = true
      // this.$refs.ruleForm.resetFields()
    },
    /**
     * 编辑按钮点击事件
     */
    thenUpdate(index, data) {
      this.addData = {
        nicId: data.nicId,
        nicTitle: data.nicTitle,
        nicStatus: data.nicStatus,
      };
      this.dialogVisible = true;
    },
    /**
     * 删除点击事件
     */
    thenDelete(index, data) {
      console.log(data)
      this.$confirm('确定删除此记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用删除接口
        this.postRequestParams('/notice/delete', {nicId: data.nicId}).then(res => {
          if (res) {
            // 刷新表格
            this.initTable();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '已取消'
        });
      });

    },
    /**
     * 取消
     */
    cancel() {
      // 关闭弹窗
      this.dialogVisible = false;
      // 初始化
      this.addData = {nicStatus: true};
    },
    /**
     * 关闭弹窗
     * @param done
     */
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {// 确定关闭
            // 初始化
            this.addData = {nicStatus: true};
            // 清除表单校验
            this.$refs.ruleForm.resetFields();
            done();
          })
          .catch(_ => {// 不关闭弹窗

          });
    },
    handleCloseErrPage() {
      this.$confirm('确认关闭？')
          .then(_ => {// 确定关闭
            this.dialogErrPage = false
            done();
          })
          .catch(_ => {// 不关闭弹窗

          });
    },
    /**
     * val 这个是当前页，@current-change 自动带过来的
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initTable();
    },
    /**
     * val 这个是当前条数，@size-change 自动带过来的
     * @param val
     */
    handleSizeChange(val) {
      this.size = val;
      this.initTable();
    },
    /**
     * 修改状态
     */
    updateStatus(data) {
      console.log(data.nicId)
      this.postRequestData("/notice/addOrUpdate", {nicId: data.nicId, nicStatus: data.nicStatus}).then(data => {
        if (data) {
          this.initTable()
        }
      })
    }



  }

}
</script>

<style scoped>

.tableSet {
  margin-top: 10px;
}

.block {
  margin-top: 10px;
  text-align: center;
}


</style>